<template>
  <div class="dropdownMenu">
        <van-dropdown-menu>
            <van-dropdown-item title="全部" disabled/>
            <van-dropdown-item 
              title="价格" 
              v-model="value2" 
              :options="option2" 
              @change='changePrice' />
            <van-dropdown-item 
              title="分类" 
              v-model="value3" 
              :options="kindArr"
              @change='changeKind' />
        </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value2: 0,
      option2: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' },
      ],
    }
  },
  props:['kindArr'],
  computed:{
    value3:{
      get(){
        // 定义选中的类别id
        let id =''
        this.kindArr.forEach(item => {
          if(item.checked){
            id=item.value
          }
        })
        return id
      },
      set(){}
    },
  },
  methods:{
    // 改变价格
    changePrice(value){
      // 将价格的变化传值过去
      this.$emit('changePrice',value)
    },
    // 改变类别-id/price
    changeKind(value){
      // 将id传过去
      this.$emit('changeKind',value);
    }
  }
}
</script>

<style>

</style>